<mat-card class="card">
  <mat-card-content class="card-content">
    <div class="header">
      <h3>{{ name | translate }}</h3>

      <button
        mat-icon-button
        ixTest="cpu-go-to-reports"
        matTooltipPosition="above"
        [attr.aria-label]="'CPU Reports' | translate"
        [matTooltip]="'CPU Reports' | translate"
        [routerLink]="['/reportsdashboard', 'cpu']"
      >
        <ix-icon name="insert_chart"></ix-icon>
      </button>
    </div>

    <div [class]="['container', size()]">
      <div class="content">
        <div class="cpu-model">
          <span>{{ cpuModel() ? cpuModel() : ('Unknown CPU' | translate) }}</span>
        </div>
        <div class="cpu-load-wrapper">
          <ix-cpu-chart-gauge class="chart-gauge"></ix-cpu-chart-gauge>
          <mat-list class="cpu-data">
            <mat-list-item>
              <span class="label">
                <strong>{{ 'Cores' | translate }}:</strong>
              </span>
              @if (!isLoading()) {
                {{ '{coreCount, plural, one {# core} other {# cores} }' | translate: { coreCount: coreCount() } }}
              } @else {
                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
              }
            </mat-list-item>
            <mat-list-item>
              <span class="label">
                <strong>{{ 'Threads' | translate }}:</strong>
              </span>
              @if (!isLoading()) {
                {{ '{threadCount, plural, one {# thread} other {# threads} }' | translate: { threadCount: threadCount() } }}
              } @else {
                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
              }
            </mat-list-item>
            <mat-list-item>
              <span class="label">
                <strong>{{ 'Highest Usage' | translate }}:</strong>
              </span>
              @if (!isLoading()) {
                {{ highest() }}
              } @else {
                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
              }
            </mat-list-item>
            <mat-list-item>
              <span class="label">
                <strong>{{ 'Hottest' | translate }}:</strong>
              </span>
              @if (!isLoading()) {
                {{ hottest() }}
              } @else {
                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
              }
            </mat-list-item>
            <ng-template #skeleton>
              <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
            </ng-template>
          </mat-list>
        </div>
        <div class="bar-wrapper">
          <ix-cpu-core-bar class="bar"></ix-cpu-core-bar>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>
